import { defineComponent, ref } from "vue";
import styles from "./questionnaire.module.scss";
import { useRouter } from "vue-router";
import { Dialog } from '@nutui/nutui';

export default defineComponent({
  setup() {
    const router = useRouter();
    const questions = ref([
      {
        question: '被保险人最近1年是否阿萨我去二闻气味其味无穷热热？',
        answer: '',
      },
      {
        question: '被保险人最近1年是否阿萨我去二闻气味其味无穷热热都是发生的发生的发时代发生的规划飞灰固化？',
        answer: '',
      },
      {
        question: '被保险人最近1年是否阿萨我去二闻气味其味无穷热热都是发生的发生的发时代发生的规划飞灰固化？',
        answer: '',
      },
      {
        question: '被保险人最近1年是否阿萨我去二闻气味其味无穷热热都是发生的发生的发时代发生的规划飞灰固化？',
        answer: '',
      },
      {
        question: '被保险人最近1年是否阿萨我去二闻气味其味无穷热热都是发生的发生的发时代发生的规划飞灰固化？',
        answer: '',
      },
    ])
    const nextStep = () => {
      if (questions.value.some(x => x.answer === '')) {
        Dialog({
          title: '提示',
          content: '存在未勾选项,请完成勾选!',
          noCancelBtn: true,
        })
      } else if (questions.value.some(x => x.answer === '1')) {
        Dialog({
          title: '提示',
          content: '对不起,您的核保没有通过!',
          noCancelBtn: true,
        })
      } else {
        router.push('/insure');
      }
    }
    return () => (
      <div class={styles.questionnaire}>
        <div class={styles['header-bar']}>
          <span>欢迎进入自主投保系统</span>
        </div>
        <div class={styles['tips']}>
          <div class={styles['tips-label']}>
            健康告知提示:
          </div>
          <div class={styles['tips-content']}>
            为保障您的权益,请您如实告知健康询问事项;如您故意或重大过失未如实告知,我司有权依法解除合同,且对于合同解除前的保险事故,我司不承担保险责任。故意未如实告知的,我司将依法不退还保费。
          </div>
        </div>
        <div class={styles['questions-bar']}>
          <span>请投保人确认被保人是否有以下情况？</span>
        </div>
        <div class={styles['questions']}>
          {
            questions.value.map((item: any, index: number) => (
              <div class={styles['questions-item']}>
                <div class={styles['questions-content']}>
                  <div class={styles['questions-index']}>{index + 1}</div>
                  <span>{item.question}</span>
                </div>
                <div class={styles['questions-answers']}>
                  <div class={[styles['questions-answers-item'], item.answer === '1' && styles.checked]} onClick={() => { item.answer = "1" }}>
                    是
                  </div>
                  <div class={[styles['questions-answers-item'], item.answer === '2' && styles.checked]} onClick={() => { item.answer = "2" }}>
                    否
                  </div>
                </div>
              </div>
            ))
          }
        </div>
        <div class={styles.statement}>
          <div class={styles['statement-label']}>声明</div>
          <div class={styles['statement-content']}>我已如实告知健康询问事项,并知悉不如实告知的法律后果。</div>
        </div>
        <div class={styles.footer}>
          <div class={styles['footer-btn']} onClick={() => { router.go(-1) }}>上一步</div>
          <div class={styles['footer-btn']} onClick={() => { nextStep() }}>下一步</div>
        </div>
      </div>
    )
  }
})